import webapp2
			
	
class MainPage(webapp2.RequestHandler):
	def get(self):
		self.response.out.write("""<html>
<head>
<script language="JavaScript">
<!-- Hide

function fall(form) {
	l = form.elements;
	for (i=1; i<=l.length; i++) {
		fun(l[i].id);
	}
}

function toggle(slotId) {
	slot = document.getElementById(slotId);
	box = document.getElementById('b' + slotId);
	if (slot.style.backgroundColor == "white" && box.checked == false) {
		slot.style.backgroundColor = "yellow";
		box.checked = true;
	}
	else {
		slot.style.backgroundColor = "white";
		box.checked = false;
	}
	alert("checkbox " + slot.innerHTML + " is now " + box.checked);
}
// -->
</script>

<style type="text/css">
	td{border:5px solid black}
	.hid{/*display:none we can uncomment this to hide boxes*/}
</style>

</head>

<body>
    <img src="/images/Logo.jpg" />
    <h1>Another Page!</h1>
	<table style="border:5px solid black">
		<tr>
			<td onClick="toggle('1_0');" id="1_0" style="background-color:white">0:00</td>
		</tr>
		<tr>
			<td onClick="toggle('1_3');" id="1_3" style="background-color:white">3:00</td>
		</tr>
		<tr>
			<td onClick="toggle('1_6');" id="1_6" style="background-color:white">6:00</td>
		</tr>
		<tr>
			<td onClick="toggle('1_9');" id="1_9" style="background-color:white">9:00</td>
		</tr>
		<tr>
			<td onClick="toggle('1_12');" id="1_12" style="background-color:white">12:00</td>
		</tr>
	</table>
<form>
<input type="checkbox" name="b1_0" id="b1_0" class="hid">
<input type="checkbox" name="b1_3" id="b1_3" class="hid">
<input type="checkbox" name="b1_6" id="b1_6" class="hid">
<input type="checkbox" name="b1_9" id="b1_9" class="hid">
<input type="checkbox" name="b1_12" id="b1_12" class="hid">
<input type="button" value="check/uncheck" onClick="fall(this.form)">
</form>
</body>
</html>""")
		

app = webapp2.WSGIApplication([('/anotherPage', MainPage)],
                              debug=True)